import React, { useRef } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import { Card, Button } from 'antd';
import ATable from '@apulis/table'
import type { ATableColumn, SearchToolBarProps } from '@apulis/table';
import type { ActionType } from '@apulis/table/lib/typing';
import { edgeRequest } from '@/utils/request';
import { Link } from 'umi';
import trans from '@/utils/translate';
import { listAPI } from './service';
import format from '@/utils/format';

// const searchList: Search
const CentralInference: React.FC = (props) => {
  const tableRef = useRef<ActionType>();
  const columns: ATableColumn[] = [
    {
      title: trans('deployOnline.edgeInference.serviceName'),
      dataIndex: 'name',
      render: (text, record) => (
        <Link to={`/deploy-online/edge-inference/detail/${record.serviceId}`}>{text}</Link>
      )
    },
    {
      title: trans('deployOnline.edgeInference.models'),
      dataIndex: 'models',
      render: (text) => {
        // const model = JSON.parse(text)[0]
        const model = text[0]
        return `${model.name}-v${model.version}`;
      }
    },
    {
      title: trans('deployOnline.edgeInference.creator'),
      dataIndex: 'userName',
    },
    {
      title: trans('info.createdAt'),
      dataIndex: 'createdAt',
      sortable: true,
      render: (text) => format(text),
    },
  ]
  const searchList: SearchToolBarProps[] = [
    {
      type: 'input',
      name: 'name',
      label: '服务名称',
      placeholder: '请输入服务名称',
      inputProps: { allowClear: true },
    }
  ]
  return (
    <PageContainer>
      <Card>
        <ATable
          actionRef={tableRef}
          request={edgeRequest}
          dataSourceAPIPath={listAPI}
          searchToolBar={searchList}
          columns={columns}
          rowKey='name'
          // searchToolBar={{
          //   type: 'input'
          // }}
          leftToolBar={(
            <Link to='/deploy-online/edge-inference/add'>
              <Button type='primary'>{trans('deployOnline.centralInference.addCentralInference')}</Button>
            </Link>
          )}
        ></ATable>
      </Card>
    </PageContainer>
  )
}

export default CentralInference;
